<app-landing-page-header [title]="'Sustainable Products'" [subTitle]="'Sustainable Products Research enables you to identify companies that are involved in a range of products and services that contribute to a more sustainable future.'"></app-landing-page-header>
<div class="container my-5">
    <div class="row mt-3">
        <div class="col-md-8 pr-4">
            <h4>Features</h4>
            <div class="row mt-5">
                <div class="col-md-6">
                    <h5>Coverage</h5>
                    <div class="d-flex flex-row mt-3">
                        <img src="/assets/icons-svg/icon-coverage.svg" class="research-icon flex-column" />
                        <span class="flex-column pl-3">Identify those companies whose products and services
                            positively contribute to social and environmental
                            challenges from a universe of over 10,000 companies.</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <h5>Depth</h5>
                    <div class="d-flex flex-row mt-3">
                        <img src="/assets/icons-svg/icon-depth.svg" class="research-icon flex-column" />
                        <span class="flex-column pl-3">Understand company involvement via quantitative and
                            qualitative data points, including percentage of
                            revenues, nature of involvement and revenue analysis.</span>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-md-6">
                    <h5>Flexibility</h5>
                    <div class="d-flex flex-row mt-3">
                        <img src="/assets/icons-svg/icon-reports.svg" class="research-icon flex-column" />
                        <span class="flex-column pl-3">Use the data to screen portfolios for, or report on,
                            company's positive contribution to social and
                            environmental challenges. </span>
                    </div>
                </div>
                <div class="col-md-6">
                    <h5>Thematic Breadth</h5>
                    <div class="d-flex flex-row mt-3">
                        <img src="/assets/icons-svg/icon-thematic-breadth.svg" class="research-icon flex-column" />
                        <span class="flex-column pl-3">Select from 12 thematic areas the sustainable
                            products and services that address the challenges
                            you are prioritizing.</span>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-md-6">
                    <h5>Accessibility</h5>
                    <div class="d-flex flex-row mt-3">
                        <img src="/assets/icons-svg/icon-accessibility.svg" class="research-icon flex-column" />
                        <span class="flex-column pl-3">Seamlessly integrate the data into your processes via
                            a data feed.</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <h5>Expertise</h5>
                    <div class="d-flex flex-row mt-3">
                        <img src="/assets/icons-svg/icon-analyst-view.svg" class="research-icon flex-column" />
                        <span class="flex-column pl-3">Leverage the insights of our expert team specializing
                            in product analysis.</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h4>Thematic Areas</h4>
            <div class="shadow carouselContainer">
                <div id="carouselThematicAreas" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselThematicAreas" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselThematicAreas" data-slide-to="1"></li>
                        <li data-target="#carouselThematicAreas" data-slide-to="2"></li>
                        <li data-target="#carouselThematicAreas" data-slide-to="3"></li>
                        <li data-target="#carouselThematicAreas" data-slide-to="4"></li>
                        <li data-target="#carouselThematicAreas" data-slide-to="5"></li>
                        <li data-target="#carouselThematicAreas" data-slide-to="6"></li>
                        <li data-target="#carouselThematicAreas" data-slide-to="7"></li>
                        <li data-target="#carouselThematicAreas" data-slide-to="8"></li>
                        <li data-target="#carouselThematicAreas" data-slide-to="9"></li>
                        <li data-target="#carouselThematicAreas" data-slide-to="10"></li>
                        <li data-target="#carouselThematicAreas" data-slide-to="11"></li>
                    </ol>
                    <div *ngIf="categories" class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="card-img-top" src="/assets/img/sustainableProducts/image-affordable-housing.png"
                                alt="Card image cap">
                            <div class="card-body">
                                <h5>Affordable Housing</h5>
                                <p>The Affordable Housing theme assesses companies’ involvement in
                                    the development and/or management of housing that is affordable to low and
                                    lower-middle
                                    income people. </p>
                            </div>
                        </div>
                        <div *ngFor="let category of categories; let first = first;" class="carousel-item">
                            <img class="card-img-top" src={{category.imgSource}} alt="Card image cap">
                            <div class="card-body">
                                <h5>{{category.name}}</h5>
                                <p>{{category.description}}</p>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselThematicAreas" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselThematicAreas" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
        <div *ngIf='!showTutorial' class='col-md-12 text-right py-5'>
            <span class='more pointer' title="Show tutorial" (click)="toggleTutorial()">see more</span>
        </div>
    </div>
</div>
<div *ngIf="showTutorial" class="bg-primary-light">
    <div class="container py-5">
        <div class="col-md-12 text-right closeIcon">
            <i class="ti-close pointer" title="Hide tutorial" (click)="toggleTutorial()"></i>
        </div>
        <div class="row">
            <div class="col-md-6 pr-5">
                <h4>First time user?</h4>
                <p>We encourage you to make use of the following resources:</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <a href="javascript:;" class="text-link" (click)="downloadFile('https://globalaccess-tutorials.s3-eu-west-1.amazonaws.com/Sustainable%20Products%20Research_Methodology.pdf')">
                    Sustainable Products Research Methodology <img src="/assets/icons-svg/icon-download.svg" class="download-icon" /></a>
            </div>
            <div class="col">
                <a href="javascript:;" class="text-link" (click)="downloadFile('https://globalaccess-tutorials.s3-eu-west-1.amazonaws.com/Sustainable%20Products%20Research_Brochure.pdf')">
                    Sustainable Products Research Brochure <img src="/assets/icons-svg/icon-download.svg" class="download-icon" /></a>
            </div>
        </div>
    </div>
</div>

<app-landing-page-filter *ngIf="productPermissions?.sustainableproducts" [settings]="settings" (apply)="applyFilter($event)"></app-landing-page-filter>

<div *ngIf="productPermissions?.sustainableproducts" class="mt-5">
    <div class="container my-5">
        <sustainableProducts-list #list (changed)="tableChanged($event)"></sustainableProducts-list>
    </div>
</div>